<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PredynasticHelper</title>
</head>
<body>
<div style="margin-left: 1400px; position: fixed;">
    <div>
        用户名: {$saveData.Username}
    </div>
    <div>
        CityName: {$saveData.CityName}
    </div>
    <div>
        Year: {$saveData.Year}
    </div>
    <div>
        当前第<span style="color: red;">{$saveData.Turn}</span>回合
    </div>
    <div>
        人口: {$saveData.Population} / {$saveData.PopulationLimit}
    </div>
    <div>
        尼罗河水位: {$saveData.Nilometer}
    </div>
    <div>
        暴乱机率: {$saveData.RiotChance}
    </div>
    <div>
        被抢劫机率: {$saveData.RaidChance}
    </div>
    <div style="padding-top: 10px;padding-bottom: 10px; font-size: 20px; background-color: yellow;">
        抢劫信息:
        <div id="raidInfo">

        </div>
    </div>
    <div>
        事件列表:
        {foreach $events as $key=>$event}
            {if $key >= $saveData.Turn}
                {$key}:{$event}<br>
            {/if}
        {/foreach}
    </div>
</div>
<div>
    <canvas id="CityCanvas" width="1000" height="700" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <canvas id="EgyptCanvas" width="1000" height="700" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>

</body>
<script src="/static/jquery-1.10.2.min.js"></script>
<script>
    function randomHexColor() { //随机生成十六进制颜色
        var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
        while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
            hex = '0' + hex;
        }
        return '#' + hex; //返回‘#'开头16进制颜色
    }

    function getEventPosition(ev){
        var x, y;
        if (ev.layerX || ev.layerX == 0) {
            x = ev.layerX;
            y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
            x = ev.offsetX;
            y = ev.offsetY;
        }
        return {x: x, y: y};
    }

    var saveData = {:json_encode($saveData, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)};
    var city = {:json_encode($saveData.City, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)};
    var egypt = {:json_encode($saveData.Egypt, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)};
    var cultResources = {:json_encode($saveData.CultResources, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)};
    var cells = city.Cells;

    var raidInfos = {};

    var initCityCanvas = function () {
        var cvs = document.getElementById("CityCanvas");
        var times = 50;
        cvs.width = city.BoundsX * times;
        cvs.height = city.BoundsY * times;

        return cvs;
    };

    var initEgyptCanvas = function () {
        var cvs = document.getElementById("EgyptCanvas");
        var times = 50;
        cvs.width = city.BoundsX * times;
        cvs.height = city.BoundsY * times;

        return cvs;
    };

    var drawCell = function (ctx, cell) {
        var times = 50;
        var text = cell.ID;

        ctx.beginPath();
        ctx.lineWidth = 0;
        ctx.strokeStyle = '#FFFFFF';

        ctx.moveTo((cell.X + cell.Borders[0].x) * times, (cell.Y + cell.Borders[0].y) * -1 * times);
        for (var i = 1; i < cell.Borders.length; i++) {

            ctx.lineTo((cell.X + cell.Borders[i].x) * times, (cell.Y + cell.Borders[i].y) * -1 * times);
        }
        ctx.closePath();
        ctx.stroke();  // 进行绘制

        if(cell.IsExplored){
            ctx.fillStyle="#7CFC00";
        }else{
            ctx.fillStyle= "#C4C4C4";
        }


        if(cell.CellTypeId == 'n_river'){
            ctx.fillStyle= "#A4D3EE";
            //console.log(cell.ID);
        }



        var temp = "";
        for(var i=0; i<cell.CellResources.length; i++){
            if(cell.CellResources[i].Productivity > 0){
                temp += cell.CellResources[i].ResourceId + ":" + cell.CellResources[i].Productivity;
            }
        }

        if(temp){
            text = temp;
        }

        if(!cell.IsVisible){
            ctx.fillStyle="#B8860B";
        }

        if(cell.CultId){
            for(var i=0; i<cultResources.length; i++){
                if (cultResources[i].ID == cell.CultResourceId) {
                    text = cultResources[i].IncomeResourceId + '部落';
                }
            }

            //text = cell.CultId + '部落';
            if(!cell.IsExplored){
                ctx.fillStyle= "#FF3030";
            }

            if(cell.Tasks.length > 0){
                raidInfos = JSON.parse(localStorage.getItem("raidInfos")) || {};
                for(var i=0; i<cell.Tasks.length; i++){
                    if(cell.Tasks[i].FinalEventId == 'tribe_raid_final'){
                        raidInfos[cell.CultId] = saveData.Turn + cell.Tasks[i].Complexity * 2 - cell.Tasks[i].Progress;
                    }
                }

                localStorage.setItem("raidInfos", JSON.stringify(raidInfos));
            }

           //console.log(cell);
        }

        ctx.globalAlpha=0.6;
        ctx.fill();

        ctx.font="12px Georgia";
        ctx.globalAlpha=1;
        ctx.strokeStyle="#000000";

        ctx.strokeText(text, cell.X * times - 50, cell.Y * -1 * times -30);

    };

    var showRaidInfos = function(){
        raidInfos = JSON.parse(localStorage.getItem("raidInfos")) || {};
        $('#raidInfo').html('');
        var info = '';
        for(var p in raidInfos){
            console.log(raidInfos[p] <= saveData.Turn);
            if(raidInfos[p] <= saveData.Turn){
                info += "<div style='background-color: red'>";
            }

            info += '下轮抢劫' + p + '的时间:第' + raidInfos[p] + '回合';

            if(raidInfos[p] <= saveData.Turn){
                info += "</div>";
            }
        }

        $('#raidInfo').html(info);
    };

    var cvs = initCityCanvas();
    var ctx = cvs.getContext("2d");

    ctx.translate(cvs.width / 2, cvs.height / 2);
    for (var i = 0; i < cells.length; i++) {
        drawCell(ctx, cells[i]);
    }

    var egyptCvs = initEgyptCanvas();
    var egyptCtx = egyptCvs.getContext("2d");
    egyptCtx.translate(egyptCvs.width / 2, egyptCvs.height / 2);

    for(var i=0; i<egypt.Cells.length; i++){
        drawCell(egyptCtx, egypt.Cells[i]);
    }

    showRaidInfos();
</script>
</html>